<!--  -->
<template>
  <div class="sy-container">
    <div id="hbhMap" style="width: 100%;height: 800px;"></div>
  </div>
</template>

<script>
import arrMap from "../assets/json/data.json";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "Synthesize",
  components: {},
  data() {
    //这里存放数据
    return {
        geoList:[]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async init() {
      const myChart = echarts.init(document.getElementById("hbhMap"))
      // 添加阴影
      for (let index = 0; index < 20; index++) {
        this.geoList.push({
          map: "LF",
          region: "LF",
          zoom: 1.2,
          // zLevel: 0,
          silent: true,
          label: {
            show: false,
          },
          // offset: [30,40],
          transform: "scaleX(-60deg)", // 使用 transform 属性来实现地图的左右倾斜效果
          roam: false,
          itemStyle: {
            areaColor: "#07183F",
            shadowColor: "#052EC0",
            shadowOffsetY: index * 1.5,
            shadowOffsetX: 0,
          },
        });
      }
      myChart.showLoading();
      echarts.registerMap("LF", arrMap);
      const option = {
        geo: [...this.geoList],
        tooltip: {
          trigger: "item",
          formatter: "{b}<br />搞笑",
        }, // 配置提示框
        series: [
          {
            name: "LF",
            type: "map",
            map: "LF",
            layoutCenter: ["10%", "60%"],
            label: {
              show: true,
              normal: {
                show: true, //显示省份标签
                textStyle: {
                  color: "#fff",
                  fontWeight: "bold",
                  fontSize: 16,
                }, //省份标签字体颜色
              },
            },
            emphasis: {
              label: {
                color: "#fff",
              },
              itemStyle: {
                borderWidth: 0,
                shadowColor: "rgba(22, 87, 200, 0.5)",
                shadowBlur: 5,
                shadowOffsetY: 5,
                // borderColor: "rgba(255,255,255,1)",
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#04C2BD", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#04C2BD", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            select: {
              label: {
                color: "#fff",
              },
              itemStyle: {
                borderWidth: 0,
                shadowColor: "rgba(22, 87, 200, 0.5)",
                shadowBlur: 20,
                shadowOffsetY: 20,
                borderColor: "rgba(255,255,255,1)",
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#779ddf", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1657C8", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            aspectScale: 0.75,
            zoom: 1.2,
            itemStyle: {
              normal: {
                areaColor: "#07195E",
                borderWidth: 1, //区域边框宽度
                borderColor: "#009fe8", //区域边框颜色
              },
            },
            data:[],
          },
        ],
      };
      myChart.hideLoading();
      myChart.setOption(option);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // // 假设有大学内部建筑物的位置数据
    // var buildings = [
    //   { name: "建筑1", value: [108.084422, 22.914586] },
    //   { name: "建筑2", value: [108.274415, 22.956074] },
    //   // ... 更多建筑物数据
    // ];
    // console.log(echarts);
    // // 基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById("hbhMap"));
    // echarts.registerMap("china", { geoJSON: arrMap });
    // // 指定图表的配置项和数据
    // let optionMap = {
    //   geo: {
    //     map: "china",
    //     roam: true,
    //     center: [108.306903, 22.832779], //定义中心点
    //     layoutSize: "100%",
    //     selectedMode: "single",
    //     regions: [
    //       //隐藏南海诸岛
    //       {
    //         name: "南海诸岛",
    //         itemStyle: {
    //           // 隐藏地图
    //           normal: {
    //             opacity: 0, // 为 0 时不绘制该图形
    //           },
    //         },
    //         label: {
    //           show: false, // 隐藏文字
    //         },
    //       },
    //     ],
    //     zoom: 12,
    //     //点击后颜色样式设置
    //     select: {
    //       itemStyle: {
    //         borderWidth: 2.5,
    //         areaColor: "rgb(8, 207, 221)",
    //         shadowColor: "rgba(255, 255, 255, 0.3)",
    //         shadowBlur: 10,
    //         shadowOffsetX: 4,
    //         shadowOffsetY: 4,
    //       },
    //     },
    //     //图形上的文本标签，可用于说明图形的一些数据信息
    //     label: {
    //       normal: {
    //         show: true,
    //         fontSize: "10",
    //         color: "#fff",
    //       },
    //     },
    //     //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
    //     itemStyle: {
    //       //normal 是图形在默认状态下的样式；
    //       normal: {
    //         // areaColor: "rgb(5,66,200,0.8)",
    //         borderColor: "#26e3ff", //线
    //       },
    //       //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
    //       emphasis: {
    //         areaColor: "#26e3ff",
    //         shadowOffsetX: 0,
    //         shadowOffsetY: 0,
    //         shadowBlur: 20,
    //         borderWidth: 0,
    //         // shadowColor: "rgba(0, 0, 0, 0.5)",
    //       },
    //     },
    //   },
    //   colorBy: "series",
    //   //   series: [
    //   //     {
    //   //       name: "信息量",
    //   //       type: "map",
    //   //       mapType: "china",
    //   //       geoIndex: 0,
    //   //       data: [], //可设置初始选中值[{ name: '武侯区', selected: true }],
    //   //     },
    //   //   ],
    // };

    // // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(optionMap);
    this.init()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.sy-container {
  width: 100%;
  height: 100vh;
}
</style>
